<template>
	<view class="content" style="background-color: #fff;">
		<u-navbar scrollable=false titleStyle="font-size:40rpx;color:#333" :placeholder='true' title="开具发票"
			:autoBack="true">
		</u-navbar>

		<view class="container">
			<view class="li">
				<text>发票类型</text><text class="fw4 co9">电子普通发票</text>
			</view>
			<view class="li">
				<text>抬头类型</text>
				<view class="" style="margin-top: 30rpx;">
					<u-radio-group v-model="radiovalue1" placement="row" @change="groupChange">
						<u-radio :customStyle="{marginBottom: '8px',marinRight:'20rpx'}" activeColor="#DD2131"
							v-for="(item, index) in radiolist1" :key="index" :label="item.name" :name="item.name"
							@change="radioChange">
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="li">
				<text>发票抬头</text>
				<view class="flex" :class="value?'fw7 co3':'fw4 co9'" @click="show = true">
					{{value?value.receipt_title:"填写需要开具发票的姓名"}}
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<view class="btn" style="position: absolute;bottom: 0;width:100%; margin;0 4%">
			<button @click="submit" class="submit">提交申请</button>
		</view>

		<view>
			<u-popup :show="show" @close="show=false">
				<view class="taitou" style="position: relative;">
					<view class="top fontS44">
						抬头选择
					</view>
					<view class="close" @click="show = false">
						<u-icon name="close"></u-icon>
					</view>
					<view class="center co9" v-if="!list">
						<view class="">
							<image src="/static/images/mine/ticket_1.png" style="width: 320rpx;height: 250rpx;" mode="">
							</image>
						</view>
						您还没有发票抬头，请创建
					</view>
					<view class="" v-if="list.length>0">
						<view class="li fontS28" v-for="(item,index) in list">
							<view class="left" @click="get(index)">
								{{item.receipt_title}}
								<view class="default" v-if="item.is_default==1">
									默认
								</view>
							</view>
							<view class="" @click="$my.go('/pages/my/ticket/add',item.id)">
								编辑
							</view>
						</view>
					</view>
					<view class="new">
						<button @click="$my.go('/pages/my/ticket/add')"
							style="background-color: #DD2131;margin:112rpx 4% 0; color:white; border-radius:45rpx; ">新建抬头</button>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>



<script>
	export default {
		data() {
			return {
				type: 1,
				show: false,
				value: '', //抬头
				list: [], //抬头列表
				allList: [],
				radiolist1: [{
						name: '个人',
						disabled: false
					},
					{
						name: '公司',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: '个人',
			}
		},
		methods: {
			submit() {
				console.log(this.value)
				let pages = getCurrentPages();
				let item1
				if (this.type) {
					pages.forEach((item2, index) => {
						if (item2.route == 'pages/my/order/sureOrder') {
							item1 = item2
						}
					})
					if (this.type == 1) {
						// 购物车购买
						this.$my.go('/pages/my/order/sureOrder?type=1&cart_id=' + item1.cart_id + '&address_id=' + item1.options.address_id + '&ticket=' + JSON.stringify(this.value))
					} else {
						//直接购买
						this.$my.go('/pages/my/order/sureOrder?type=2&orderinfo=' + item1.options.orderinfo +'&address_id=' + item1.options.address_id + '&ticket=' + JSON.stringify(this.value))
					}
				}
			},
			// 弹窗显示个人公司抬头类型
			aa(n) {
				if (n == "个人") {
					const res = this.allList.filter(item => item.receipt_title_type == "1")
					this.list = res
					uni.setStorageSync('receipt_title_type', '1');
				} else if (n == "公司") {
					this.show = true;
					const res = this.allList.filter(item => item.receipt_title_type == "2")
					this.list = res
					uni.setStorageSync('receipt_title_type', '2')
				}
			},
			get(index) {
				this.show = false
				this.value = this.list[index]
			},
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
				this.aa(n)
				this.value = ''
			},
			init() {
				this.$my.get('/index/user/get_receipt').then(res => {
					if (res.code == 200) {
						this.allList = res.data
						console.log(this.allList, '...............');
						this.aa("个人")
					}
				})
			}
		},
		onLoad(option) {
			this.type = option.type ? option.type : 1
		},
		mounted() {
			this.init()
			uni.setStorageSync('receipt_title_type', '1') //抬头类型 ，1个人2公司
			console.log(this.list);
		}
	}
</script>

<style lang="scss" scoped>
	.content {

		// border: 2rpx solid #f5f5f5;
		.container {
			padding: 0 4%;

			>.li {
				height: 100rpx;
				border-bottom: 2rpx solid #f3f3f3;
				line-height: 100rpx;
				font-size: 32rpx;
				display: flex;
				justify-content: space-between;
				font-weight: bold;

				.fw4 {
					font-weight: 400;
				}
			}
		}

		.btn {
			.submit {
				width: 92%;
				background-color: #DD2131;
				border-radius: 45rpx;
				color: white;
			}
		}

		.taitou {
			height: 800rpx;
			width: 100%;


			.top {
				// margin-top: 16rpx;
				text-align: center;
				width: 200rpx;
				margin: 16rpx auto 0;
			}

			.close {
				position: absolute;
				top: 30rpx;
				right: 30rpx;
			}

			.center {
				margin-top: 164rpx;

			}

			.li {
				height: 100rpx;
				border-bottom: 2rpx solid #f3f3f3;
				line-height: 100rpx;
				// text-align: center;
				display: flex;
				justify-content: space-between;
				padding: 0 4%;

				.left {
					display: flex;
					flex-grow: 1;

					.default {
						padding: 2rpx 8rpx;
						border: 2rpx solid #DD2131;
						height: 32rpx;
						line-height: 32rpx;
						margin-top: 30rpx;
						margin-left: 20rpx;
						font-size: 20rpx;
						color: #DD2131;
						border-radius: 10rpx;
						// margin-top: 20rpx;
					}
				}
			}

			.new {
				// margin: ;
				padding: 0 4%;
				box-sizing: border-box;
				width: 100%;
				position: absolute;
				bottom: 0;
			}

		}


	}
</style>
